<!-- 宽屏导航栏 -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="./css/nav.css" rel="stylesheet" type="text/css">
    <script>
        window.onload = function () {
            const hamburger = document.querySelector(".hamburger");
            const navMenu = document.querySelector(".nav-menu");

            hamburger.addEventListener("click", mobileMenu);

            function mobileMenu() {
                hamburger.classList.toggle("active");
                navMenu.classList.toggle("active");
            }
        }
    </script>
</head>

<body>
    <header class="header">
        <nav class="navbar">
            <a href="#" class="nav-logo">Logo</a>
            <ul class="nav-menu">
                <li class="nav-item">
                    <a href="#" class="nav-link">航天历史</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">重要人物</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">近期资讯</a>
                </li>
                <li class="nav-item">
                    <a href="#" class="nav-link">太空漂流瓶</a>
                </li>
                <li></li>
            </ul>
            <div class="hamburger">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </div>
        </nav>
    </header>
</body>
</html>